import React, { useState } from 'react';
import { Card, Table, Button, Space, Tag, Input, Select, Switch, message } from 'antd';
import { PlusOutlined, SearchOutlined, CheckCircleOutlined, CloseCircleOutlined } from '@ant-design/icons';
import './index.less';

const { Option } = Select;

interface DataElementItem {
  key: string;
  code: string;
  name: string;
  internalCode: string;
  definition: string;
  dataType: string;
  valueRange?: string;
  enabled: boolean;
  sortNo: string;
}

const DataSet: React.FC = () => {
  const [searchValue, setSearchValue] = useState('');
  const [statusFilter, setStatusFilter] = useState('all');

  const handleStatusChange = (checked: boolean, record: DataElementItem) => {
    console.log(`状态变更: ${checked ? '启用' : '禁用'}`, record);
    message.success(`${record.name} 已${checked ? '启用' : '禁用'}`);
  };

  const columns = [
    {
      title: '标识符',
      dataIndex: 'code',
      key: 'code',
      width: 150,
    },
    {
      title: '名称',
      dataIndex: 'name',
      key: 'name',
      width: 180,
    },
    {
      title: '内部标识符',
      dataIndex: 'internalCode',
      key: 'internalCode',
      width: 150,
    },
    {
      title: '定义',
      dataIndex: 'definition',
      key: 'definition',
      width: 200,
    },
    {
      title: '数据类型',
      dataIndex: 'dataType',
      key: 'dataType',
      width: 120,
    },
    {
      title: '允许值',
      dataIndex: 'valueRange',
      key: 'valueRange',
      width: 180,
      render: (text: string, record: DataElementItem) => (
        <>
          {text && text.includes('GB/T') && (
            <span className="reference-value">{text}</span>
          )}
        </>
      ),
    },
    {
      title: '有效状态',
      dataIndex: 'enabled',
      key: 'enabled',
      width: 100,
      render: (enabled: boolean, record: DataElementItem) => (
        <Switch 
          checked={enabled} 
          onChange={(checked) => handleStatusChange(checked, record)}
          size="small"
          className="status-switch"
        />
      ),
    },
    {
      title: '排序号',
      dataIndex: 'sortNo',
      key: 'sortNo',
      width: 100,
    },
    {
      title: '操作',
      key: 'action',
      render: (_: any, record: DataElementItem) => (
        <Space size="small" className="action-buttons">
          {record.name ? (
            <>
              <a className="edit-link">编辑</a>
              <span className="divider">|</span>
              <a className="delete-link">删除</a>
            </>
          ) : (
            <>
              <a className="check-link"><CheckCircleOutlined /></a>
              <a className="close-link"><CloseCircleOutlined /></a>
            </>
          )}
        </Space>
      ),
    },
  ];

  // 根据图片创建更真实的数据
  const data: DataElementItem[] = [
    {
      key: '1',
      code: 'DE01.00.009.00',
      name: '城乡居民健康档案编号',
      internalCode: 'HDSD00.02.003',
      definition: '城乡居民个人健康档案的编号',
      dataType: 'S1_N17',
      enabled: true,
      sortNo: '10001',
    },
    {
      key: '2',
      code: 'DE01.00.009.00',
      name: '城乡居民健康档案编号',
      internalCode: 'HDSD00.02.003',
      definition: '城乡居民个人健康档案的编号',
      dataType: 'S1_N17',
      enabled: true,
      sortNo: '10002',
    },
    {
      key: '3',
      code: 'DE01.00.009.00',
      name: '城乡居民健康档案编号',
      internalCode: 'HDSD00.02.003',
      definition: '城乡居民个人健康档案的编号',
      dataType: 'S1_N17',
      enabled: true,
      sortNo: '10003',
    },
    {
      key: '4',
      code: 'DE02.01.040.00',
      name: '性别代码',
      internalCode: 'HDSD00.02.050',
      definition: '患者生理性别在特定编码体系中的代码',
      dataType: 'S3_N1',
      valueRange: 'GB/T 2261.1-2003 性别',
      enabled: true,
      sortNo: '10004',
    },
    {
      key: '5',
      code: 'DE02.01.040.00',
      name: '性别代码',
      internalCode: 'HDSD00.02.050',
      definition: '患者生理性别在特定编码体系中的代码',
      dataType: 'S3_N1',
      valueRange: 'GB/T 2261.1-2003 性别',
      enabled: true,
      sortNo: '10005',
    },
    {
      key: '6',
      code: 'DE02.01.040.00',
      name: '性别代码',
      internalCode: 'HDSD00.02.050',
      definition: '患者生理性别在特定编码体系中的代码',
      dataType: 'S3_N1',
      valueRange: 'GB/T 2261.1-2003 性别',
      enabled: true,
      sortNo: '10006',
    },
    {
      key: '7',
      code: 'DE02.01.025.00',
      name: '民族',
      internalCode: 'HDSD00.02.042',
      definition: '患者所属民族在特定编码体系中的代码',
      dataType: 'S3_N2',
      valueRange: 'GB/T 3304-1991 民族',
      enabled: true,
      sortNo: '10007',
    },
    {
      key: '8',
      code: 'DE02.01.025.00',
      name: '民族',
      internalCode: 'HDSD00.02.042',
      definition: '患者所属民族在特定编码体系中的代码',
      dataType: 'S3_N2',
      valueRange: 'GB/T 3304-1991 民族',
      enabled: true,
      sortNo: '10008',
    },
  ];

  // 过滤数据
  const filteredData = data.filter(item => {
    const matchesSearch = !searchValue || 
      item.code.toLowerCase().includes(searchValue.toLowerCase()) || 
      item.name.toLowerCase().includes(searchValue.toLowerCase());
    const matchesStatus = statusFilter === 'all' || 
      (statusFilter === 'enabled' && item.enabled) || 
      (statusFilter === 'disabled' && !item.enabled);
    return matchesSearch && matchesStatus;
  });

  return (
    <div className="dataset-container">
      <Card bordered={false} title="患者基础信息元素表">
        <div className="table-top">
          <Space>
            <Button type="primary" icon={<PlusOutlined />}>
              添加数据元素
            </Button>
            <Select 
              value={statusFilter} 
              onChange={(value) => setStatusFilter(value)}
              style={{ width: 120 }}
            >
              <Option value="all">可用</Option>
              <Option value="enabled">启用</Option>
              <Option value="disabled">禁用</Option>
            </Select>
          </Space>
          <Input.Search
            placeholder="标识符/名称"
            value={searchValue}
            onChange={(e) => setSearchValue(e.target.value)}
            onSearch={value => setSearchValue(value)}
            style={{ width: 300 }}
          />
        </div>
        <Table 
          columns={columns} 
          dataSource={filteredData} 
          pagination={{ 
            pageSize: 15,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total) => `每页 ${15} 条 (共${total}条)`,
          }}
          rowClassName={(record) => {
            if (record.code === 'DE02.01.025.00') return 'highlighted-row';
            return '';
          }}
        />
      </Card>
    </div>
  );
};

export default DataSet; 
